import { menuTree } from "@/constants";
import { getMenuList, getUserInfo } from "@/services";
import { useMainStore } from "@/stores";
import { useRequest } from "ahooks";
import { Layout } from "antd";
import { Navigate } from "react-router-dom";
import HeaderContent from "./components/HeaderContent";
import MainContent from "./components/MainContent";
import SiderContent from "./components/SiderContent";
import "./index.css";
const { Header, Sider, Content } = Layout;

const BasicLayout = () => {
  const { token, collapsed, setName, setMenuList, setMenuTree } = useMainStore((state) => state);

  // 初始化查询：首次登录查询用户信息和菜单数据
  useRequest(async () => {
    const res1 = await getUserInfo();
    const res2 = await getMenuList();
    setName(res1.data.name);
    setMenuList(res2.data);
    setMenuTree(menuTree);
  });

  // 渲染拦截
  if (!token) {
    return <Navigate to="/login" replace={true} />;
  }

  return (
    <Layout className="layoutContainer">
      <Sider className="layoutLeftContainer" width={200} collapsedWidth={60} collapsed={collapsed}>
        <SiderContent />
      </Sider>
      <Layout className="layoutRightContainer">
        <Header className="layoutHeader">
          <HeaderContent />
        </Header>
        <Content className="layoutContent">
          <MainContent />
        </Content>
      </Layout>
    </Layout>
  );
};

export default BasicLayout;
